<template>
    <div class="choose-item space-around" v-if="props.direction == 'left'">
        <div class="choose-item-pic" style="margin-right: 30px;">
            <MyImage :url="movieInfo?movieInfo!.movieCover:''" :fs='20' fc='#00B7C3' :data="movieInfo?movieInfo!:null"
                :date="dayjs().format('YYYY-MM-DD')"></MyImage>
        </div>
        <div class="choose-item-desc">
            <div class="choose-item-box">
                <div><b>电影名称：</b>{{movieInfo?.movieName?movieInfo?.movieName:'未知'}}</div>
                <div><b>电影介绍：</b>{{movieInfo?.movieDesc?movieInfo?.movieDesc:'未知'}}</div>
                <div><b>电影类型：</b> {{allTypes&&movieInfo?allTypes[movieInfo!.movieTypeId - 1].type :'未知'}}
                </div>
                <div><b>电影时长：</b> {{movieInfo?.movieView?movieInfo?.movieDuring:'未知'}}</div>
                <div><b>评分人数：</b> {{movieInfo?.movieScoreNum?movieInfo?.movieScoreNum:'未知'}}</div>
                <div><b>电影浏览量：</b> {{movieInfo?.movieView?movieInfo?.movieView:'未知'}}</div>
                <div><b>电影评分：</b>
                    <el-rate show-score v-model="movieInfo.movieScore" disabled score-template="{value} 分" />
                </div>

            </div>
            <div class="choose-item-box">
                <div><b>影院名称：</b>{{movieInfo?.cinemaName?movieInfo?.cinemaName:'未知'}}</div>
                <div><b>影院地址：</b>{{movieInfo?.cinemaAddress?movieInfo?.cinemaAddress:'未知'}}</div>
                <div><b>播放日期：</b> {{movieInfo?.playDate?movieInfo?.playDate:'未知'}}</div>
                <div><b>播放时间：</b> {{`${Math.floor(movieInfo.startTime! / 30 / 2).toString().padStart(2,
                '0')}:${((movieInfo.startTime! /
                30 % 2) * 30).toString().padStart(2, '0')} - ${Math.floor(movieInfo.endTime! / 30 /
                2).toString().padStart(2, '0')}:${((movieInfo.endTime! / 30 % 2) * 30).toString().padStart(2,
                '0')}`}}</div>
            </div>

        </div>
    </div>
    <div class="choose-item space-around" v-if="props.direction == 'right'">
        <div class="choose-item-desc" style="margin-right: 30px;">
            <div class="choose-item-box">
                <div><b>电影名称：</b>{{movieInfo?.movieName?movieInfo?.movieName:'未知'}}</div>
                <div><b>电影介绍：</b>{{movieInfo?.movieDesc?movieInfo?.movieDesc:'未知'}}</div>
                <div><b>电影类型：</b> {{allTypes&&movieInfo?allTypes[movieInfo!.movieTypeId - 1].type :'未知'}}
                </div>
                <div><b>电影时长：</b> {{movieInfo?.movieView?movieInfo?.movieDuring:'未知'}}</div>
                <div><b>评分人数：</b> {{movieInfo?.movieScoreNum?movieInfo?.movieScoreNum:'未知'}}</div>
                <div><b>电影浏览量：</b> {{movieInfo?.movieView?movieInfo?.movieView:'未知'}}</div>
                <div><b>电影评分：</b>
                    <el-rate show-score v-model="movieInfo.movieScore" disabled score-template="{value} 分" />
                </div>

            </div>
            <div class="choose-item-box">
                <div><b>影院名称：</b>{{movieInfo?.cinemaName?movieInfo?.cinemaName:'未知'}}</div>
                <div><b>影院地址：</b>{{movieInfo?.cinemaAddress?movieInfo?.cinemaAddress:'未知'}}</div>
                <div><b>播放日期：</b> {{movieInfo?.playDate?movieInfo?.playDate:'未知'}}</div>
                <div><b>播放时间：</b> {{`${Math.floor(movieInfo.startTime! / 30 / 2).toString().padStart(2,
                '0')}:${((movieInfo.startTime! /
                30 % 2) * 30).toString().padStart(2, '0')} - ${Math.floor(movieInfo.endTime! / 30 /
                2).toString().padStart(2, '0')}:${((movieInfo.endTime! / 30 % 2) * 30).toString().padStart(2,
                '0')}`}}</div>
            </div>
        </div>
        <div class="choose-item-pic">
            <MyImage :url="movieInfo?movieInfo!.movieCover:''" :fs='20' fc='#00B7C3' :data="movieInfo?movieInfo!:null"
                :date="dayjs().format('YYYY-MM-DD')"></MyImage>
        </div>
    </div>
    <!-- <div class="choose-item space-around" v-else>
        <h2 class="choose-item-null">这里什么也没有</h2>
    </div> -->
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'
import MyImage from '../../../../components/MyImage.vue'
import dayjs from 'dayjs'
interface IConditionMovie {
    movieCover: string
    movieDesc: string
    movieId: number
    movieName: string
    movieScore: number
    movieScoreNum: number
    movieTypeId: number
    movieView: number
    movieDuring: number
    cinemaName?: string
    cinemaAddress?: string
    playDate?: string
    startTime?: number
    endTime?: number
}
const allTypes = JSON.parse(window.sessionStorage.getItem("allTypes")!)
const props = defineProps<
    {
        direction: string
        movieInfo: IConditionMovie
    }
>();
</script>

<style lang="less" scoped>
// 该变量关联MyHeader组件
@leftAndRight: 100px;

.choose-item {
    width: calc(100% - 2 * @leftAndRight);
    height: 250px;

    .choose-item-pic {
        flex: 0 0 30%;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.6);
        height: 100%;
        overflow: hidden;
    }

    .choose-item-desc {
        display: flex;
        flex: 0 1 70%;
        border-radius: 20px;
        background-color: rgba(255, 255, 255, 0.6);
        height: 100%;
        padding: 20px;

        .choose-item-box {
            display: flex;
            flex: 1;
            justify-content: space-between;
            align-items: flex-start;
            flex-direction: column;
        }
    }
}
</style>